<template>
  <div class="home">
    <h3 class="title" v-if="addressInfo">
      {{addressInfo.address}}
      <span v-show="addressInfo.alias"> ({{addressInfo.alias}})</span>
      <i class="iconfont iconfuzhi clicks" @click="copy(addressInfo.address)"></i>
      <!-- <i class="iconfont iconerweima clicks" @click="showCode"></i> -->
    </h3>

    <div class="w1200 overview bg-white" v-loading="overviewLoading">
      <div class="title">
        <!-- <img src="./../assets/img/nuls-logo.svg"/>{{symbol.toLocaleUpperCase()}} -->
        <img src="./../assets/img/altoro-logo.png"/>Altoro
        <!-- <span class="fr click" @click="toUrl('txList',addressNULSAssets)">{{$t('home.home2')}}</span> 交易记录 -->
      </div>
      <div class="total fl">
        <p>{{$t('tab.tab2')}}</p>
        <h6>
          {{addressNULSAssets.total}}
        </h6>
      </div>
      <div class="balance fl">
        <p>{{$t('public.usableBalance')}}</p>
        <h6>
          <font>{{addressNULSAssets.balance}}</font>
          <el-button type="success" @click="toUrl('transfer')">{{$t('tab.tab31')}}
          </el-button>
          <!-- <el-button @click="showCode">{{$t('tab.tab27')}}</el-button> -->
        </h6>
      </div>
      <div class="locking fl">
        <p>{{$t('tab.tab3')}}</p>
        <h6>
          <font>{{addressNULSAssets.locking}}</font>
          <span class="font14 click" @click="toUrl('frozenList',addressNULSAssets)">{{$t('tab.tab28')}}</span>
        </h6>
      </div>
    </div>
    <div class="cb"></div>
    <TxList></TxList>
  </div>
</template>

<script>
  import axios from 'axios'
  import QRCode from 'qrcodejs2'
  // import {timesDecimals} from '@/api/util'
  import {copys, addressInfo, Times, superLong, connectToExplorer, Plus, Minus,divisionDecimals,deleNumber6} from '@/api/util'
  import TxList from './users/TxList'
  import {RUN_PATTERN} from '@/config'

  export default {
    name: 'home',
    data() {
      return {
        symbol: 'NULS', //symbol
        homeActive: 'homeFirst',   //tab默认选中
        addressInfo: {},//默认账户信息
        addressNULSAssets: {},//账户NULS资产信息
        overviewLoading: true,//nuls资产加载动画
        addressAssetsData: [],//账户资产列表
        NULSUsdt: 0,//nuls美元值
        assetsListLoading: true,//账户资产列表加载动画
        //资产类型
        assetsOptions: [
          {value: '0', label: '0'},
          {value: '1', label: '1'},
          {value: '2', label: '2'}
        ],
        assetsValue: "0",
        txListDataLoading: true,  //资产加载动画
        txListData: [], //交易数据
        pageNumber: 1, //页码
        pageSize: 100,//条数
        pageCount: 0, //总条数
        crossLinkData: [],//跨链资产
        crossLinkDataLoading: true, //资产加载动画

        activeName: 'payeeInfo', //tab
        payeeForm: {
          amount: 100,
          currency: 'NULS',
          decimals: 8
        }

      };
    },
    components: {TxList},
    created() {
      this.addressInfo = addressInfo(1);
      setInterval(() => {
        this.addressInfo = addressInfo(1);
      }, 500);

      //判断是否有账户
      if (this.addressInfo) {
        setTimeout(() => {
          this.getAddressInfoByNode(this.addressInfo.address);
        }, 600);
      } else {
        this.$router.push({
          name: "newAddress"
        })
      }
    },
    mounted() {
      this.symbol = sessionStorage.hasOwnProperty('info') ? JSON.parse(sessionStorage.getItem('info')).defaultAsset.symbol : 'NULS';
    },
    watch: {
      addressInfo(val, old) {
        if (val) {
          if (val.address !== old.address && old.address) {
            this.getAddressInfoByNode(this.addressInfo.address);
          }
        }
      }
    },
    methods: {

      /**
       * 获取地址资产信息
       * @param address
       **/
      async getAddressInfoByNode(address) {
        var params = {
            address: address,
            visible: true
        }
        this.overviewLoading = true;
        await this.$post('/wallet/getaccount', 'getAccountLedgerList', params, 'Home')
          .then((response) => {
            // console.log('地址账户余额信息',response);
            this.addressAssetsData = [];
            let newAssetsList = {};
            if (JSON.stringify(response)!='{}') {
              newAssetsList.account = 'ATR';
              newAssetsList.chainId = '1';
              newAssetsList.assetId = '1';
              newAssetsList.type = 1;
              // newAssetsList.balance = Number(timesDecimals(response.result[0].balance)).toFixed(3);
              newAssetsList.balance = Number(deleNumber6(response.balance)).toFixed(3);
              if (response.delegate_frozen) {
                newAssetsList.locking = Number(deleNumber6(response.delegate_frozen)).toFixed(3);                
              } else {
                newAssetsList.locking = "0";
              }
              newAssetsList.total = (Number(newAssetsList.balance) + Number(newAssetsList.locking)).toFixed(3);
            } else {
              // newAssetsList.account = response.result.symbol;
              // newAssetsList.chainId = response.result.chainId;
              // newAssetsList.assetId = response.result.assetId;
              newAssetsList.account = 'ATR';
              newAssetsList.chainId = 1;
              newAssetsList.assetId = 1;
              newAssetsList.type = 1;
              newAssetsList.total = "0.000";
              newAssetsList.locking = "0.000";
              newAssetsList.balance = "0.000";
            }
            this.addressInfo.balance = newAssetsList.balance;
            this.addressNULSAssets = newAssetsList;
            //console.log(this.addressNULSAssets);
            // this.getNULSUSDT(Number(newAssetsList.total));
            this.overviewLoading = false;
            //this.addressAssetsData.push(newAssetsList);
            this.assetsListLoading = false;
          })
          .catch((error) => {
            let newAssetsList = {};
            newAssetsList.account = 'ATR';
            newAssetsList.chainId = 1;
            newAssetsList.assetId = 1;
            newAssetsList.type = 1;
            newAssetsList.total = "0.000";
            newAssetsList.locking = "0.000";
            newAssetsList.balance = "0.000";
            this.addressNULSAssets = newAssetsList;
            this.overviewLoading = false;
            this.assetsListLoading = false;
            console.log(error);
          })
      },

      /**
       * 连接跳转
       * @param name
       * @param parms
       * @param type 0:本网站跳转，1：跳转浏览器
       */
      toUrl(name, parms, type = 0) {
        //console.log(name, parms, type);
        if (type === 1) {
          connectToExplorer(name, parms)
        } else {
          let newParms = {accountType: parms};
          if (name === 'transfer') {
            this.$router.push({
              name: name,
              query: newParms
            })
          } else if (name === 'frozenList') {
            newParms = {accountInfo: parms};
            this.$router.push({
              name: name,
              query: newParms
            })
          } else {
            if (parms.type === 2) {
              //console.log(parms);
              this.$router.push({
                name: 'tokenTxList',
                query: {contractAddress: parms.contractAddress}
              })
            } else {
              this.$router.push({
                name: name,
                query: {chainId: parms.chainId, assetId: parms.assetId,}
              })
            }
          }
        }
      },

      /**
       * 复制方法
       * @param sting
       **/
      copy(sting) {
        copys(sting);
        this.$message({message: this.$t('public.copySuccess'), type: 'success', duration: 1000});
      },
    }
  }
</script>
<style lang="less">
  @import "./../assets/css/style";

  .home {
    background-color: @Bcolour1;
    .title {
      height: 130px;
    }
    .overview {
      border: @BD1;
      margin: -30px auto 0;
      height: 158px;
      .title {
        text-align: left;
        background-color: #f9fafd;
        line-height: 40px;
        color: #475472;
        height: 40px;
        font-size: 16px;
        padding: 0 20px;
        border-bottom: 1px solid #dfe4ef;
        font-weight: bold;
        img {
          width: 15px;
          margin: 6px 10px 5px 10px;
          float: left;
        }
        span {
          font-size: 14px;
          font-weight: normal;
        }
      }
      p {
        font-size: 16px;
        font-weight: 600;
        color: #8794b1;
        padding: 20px 30px 5px;
      }
      h6 {
        font-weight: 600;
        font-size: 24px;
        color: #475472;
        padding: 0 30px;
        font {
          padding: 0 20px 0 0;
          font-weight: 600;
          font-size: 24px;
          color: #475472;
        }
      }
      .total {
        width: 441px;
        height: 90px;
        border-right: @BD1;
        margin: 14px auto;
        h6 {
          span {
            font-weight: normal;
          }
        }
      }
      .balance {
        width: 35%;
        p {
          padding: 34px 0 0 70px;
        }
        h6 {
          padding: 4px 0 0 70px;
          font {
            display: block;
            float: left;
          }
          .el-button {
            padding: 5px 15px;
            border-radius: 2px;
            display: block;
            float: left;
            margin-top: 2px;
          }
          .el-button--default {
            margin-left: 12px;
          }
        }
      }
      .locking {
        width: 28%;
        p {
          padding: 34px 0 0 80px;
        }
        h6 {
          padding: 4px 0 0 80px;
          span {
            font-weight: normal;
          }
        }
      }

    }
    .home_tabs {
      padding-bottom: 100px;
      .el-tabs {
        margin: 30px auto 0;
        .el-select {
          margin: 5px 10px 15px 0;
        }
      }
    }
    .payee_dialog {
      .el-dialog {
        .el-dialog__header {
          border: 0;
          padding: 0;
        }
        .el-dialog__body {
          padding: 15px 0 30px;
          .el-tabs__header {
            .el-tabs__item {
              padding-left: 20px;
            }
          }
          .el-tabs__content {
            padding: 0 20px;
          }
          .qrcode {
            margin: 0 auto;
            width: 250px;
            height: 250px;
            img {
              text-align: center;
            }
          }
          .font12 {
            height: 20px;
            margin: 10px 0 0 0;
          }
        }
      }
    }
    .payee_form {
      width: 20rem;
      .el-form-item {
        .el-select {
          .el-input {
            .el-input__inner {
              width: 20rem !important;
            }
          }

        }
      }
      .el-button {
        width: 7rem;
      }
      .el-button--success {
        span {
          color: #ffffff;
        }
      }
    }
  }
</style>
